<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/font-awesome.min.css" rel="stylesheet">
    <link href="/common/css/hm-ui.css" rel="stylesheet">
    <link href="/ajax/libs/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="/css/style.css" rel="stylesheet">
    <style>
        .box {
            height: 500px;
            /*width: 200px;*/
            /*border: 1px solid black;*/
            overflow: auto;
            border-top: 0;
            box-shadow: none;

        }

        .content {
            height: 550px;
            /*width: 150px;*/
            /*border: 1px solid red;*/
        }

        .expand-control {
            font-size: 12px;
            color: #1682e6;
            cursor: pointer;
        }
    </style>
</head>


<body style="background-color: white">
<div class="main-content" style="margin: 0;padding: 0">

    <div class="mb2">
        <a class="expand-control" id="expandBtn">展开 <i class="fa fa-angle-down"></i></a>
    </div>
    <form id="post-form">
        <div class="mb2">
            <label class="input-text">流水号</label><input type="text" name="wsCode" autocomplete="off" class="input-item"/>
            <label class="input-text">提取码</label><input type="text" name="wsKey" autocomplete="off" class="input-item"/>
        </div>
        <div class="mb10">
            <label class="input-text">工单编号</label><input type="text" name="wkFmNo" autocomplete="off" class="input-item"/>
            <label class="input-text">来电内容</label><input type="text" name="fmContent" autocomplete="off" class="input-item"/>
            <label class="input-text">事发地址</label><input type="text" name="fmAddress" autocomplete="off" class="input-item"/>
            <label class="input-text">事发地址</label><input type="text" name="accSubject" autocomplete="off" class="input-item"/>
            <a class="btn btn-primary btn-rounded btn-sm" id="search"><i class="fa"></i>查询</a>
        </div>
    </form>
    <form id="form-user-add" class="form-horizontal" style="background-color: white">

        <div class="col-sm-12">
            <div class="work-order box">
                <div class="content">

                </div>
            </div>
        </div>

        <!--     分页按钮 -->


    </form>
    <!-- loading -->
    <div class="modal fade" id="loading" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         data-backdrop='static' style="display: flex;align-items: center;justify-content: space-around;">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">提示</h4>
                </div>
                <div class="modal-body">
                    请稍候...<span id="result"></span>
                </div>
            </div>
        </div>
    </div>

</div>

<th:block th:include="include :: footer"/>
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/ajax/libs/jquery-jqPaginator/jqPaginator.js"></script>
<script src="/js/relevanceRec.js"></script>

<script>
    $('#search').bind('click', function () {
        //获取页面传过来的参数
        var url = decodeURI(location.search); //?id="123456"&Name="bicycle";
        var object = {};
        if (url.indexOf("?") != -1)//url中存在问号，也就说有参数。
        {
            var str = url.substr(1);  //得到?后面的字符串
            var strs = str.split("&");  //将得到的参数分隔成数组[id="123456",Name="bicycle"];
            for (var i = 0; i < strs.length; i++) {
                object[strs[i].split("=")[0]] = strs[i].split("=")[1]
            }
        }

        //获取查询条件
        var wsCode = $('input[name=wsCode]').val();
        var wsKey = $('input[name=wsKey]').val();
        var fmContent = $('input[name=fmContent]').val();
        var fmAddress = $('input[name=fmAddress]').val();
        var wkFmNo = $('input[name=wkFmNo]').val();
        var accSubject = $('input[name=accSubject]').val();

        //ajax查询获取数据
        $.ajax({
            url: "/system/mTelRcd/relevanceRec",
            data: {
                wsCode: wsCode,
                wsKey: wsKey,
                fmContent: fmContent,
                fmAddress: fmAddress,
                wkFmNo: wkFmNo,
                accSubject: accSubject,
                keyWord: object.keyWord
            },
            type: "POST",
            dataType: "json",
            beforeSend: function () {
                $('#loading').modal('show');
            },
            complete: function () {
                $('#loading').modal('hide');
            },
            success: function (data) {
                // data = jQuery.parseJSON(data);  //dataType指明了返回数据为json类型，故不需要再反序列化
                var contentObj = document.getElementsByClassName("content")[0];

                if (data.rows.length == 0) {
                    contentObj.innerHTML = '<span style="text-align: center;color:deepskyblue"><h4>没有匹配的数据</h4></span>';
                } else {
                    var isHtml = "";
                    var arr = data.rows;

                    for (var i = 0; i < data.rows.length; i++) {
                        let wkFmNo = arr[i].wkFmNo == null ? '暂无' : arr[i].wkFmNo;
                        // console.log(arr[i])
                        isHtml += '<div class="col-sm-12 work-box" ondblclick="parent.telDetail(' + arr[i].wkPkId + ',' + arr[i].pkId + ')">';
                        isHtml += '<div class="work-box-top">';
                        isHtml += '<div class="col-sm-12 work-box-top-box">';
                        isHtml += '<div class="col-sm-10"><a class="work-box-a" onclick="parent.telDetail(' + arr[i].wkPkId + ',' + arr[i].pkId + ')"><span>' + arr[i].fromName + '[' + arr[i].dfmClaName + ']' + arr[i].dcntAname + '</span></a></div>';
                        isHtml += '<div class="col-sm-2">';
                        isHtml += '<button type="button" class="btn btn-sm btn-primary" onclick="copy(' + '\'' + arr[i].pkId + '\'' + ')" style="color: #206ef7;background-color: white;margin-right: 15px;">一键复制';
                        isHtml += '</button>';
                        // isHtml += '<i class="fa fa-chevron-circle-right"></i>';
                        isHtml += '</div>';
                        isHtml += '</div>';
                        isHtml += '<div class="col-sm-12 work-box-top-class" onclick="parent.telDetail(' + arr[i].wkPkId + ',' + arr[i].pkId + ')">'
                        isHtml += '<div class="col-sm-6"><a style="color: inherit">流水号：' + arr[i].wsCode + '</a></div>'
                        isHtml += '<div class="col-sm-6"><a style="color: inherit">工单编号：' + wkFmNo + '</a></div>'
                        isHtml += '</div>'
                        isHtml += '<div class="col-sm-12 work-box-class" onclick="parent.telDetail(' + arr[i].wkPkId + ',' + arr[i].pkId + ')">';
                        isHtml += '<a style="color: inherit">' + arr[i].fmContent + '</a>'
                        isHtml += '</div>'
                        isHtml += '<div class="col-sm-12 work-box-buttom">';
                        isHtml += '<div class="col-sm-6">' + arr[i].fromTime + '</div>';
                        isHtml += '<div class="col-sm-4">';
                        isHtml += '<div class="col-sm-12 entering-pd">处理情况：' + arr[i].stateDesc + '</div>';
                        isHtml += '</div>';
                        isHtml += '</div>';
                        isHtml += '</div>';
                        isHtml += '</div>';
                    }
                    ;
                    // 一页有多少条数据
                    var size = 5;
                    // 当前页码
                    var curPage = 1;
                    // 总共有多少页
                    var totalPage = Math.floor((data.total / size) + 1);
                    // 是否有下一页
                    var hasNext = curPage != totalPage;
                    if (hasNext) {
                        isHtml += '<div id="txtMore' + curPage + '" style="text-align: center" onclick="more(' + totalPage + ',' + size + ',' + (curPage + 1) + ')"><a>更多</a></div>'
                    } else {
                        isHtml += '<div style="text-align: center">没有更多了......</div>'
                    }
                    contentObj.innerHTML = isHtml;
                }

            }

        });

        //更多按钮加载
        more = function (totalPage, size, curPage) {
            $('#txtMore' + (curPage - 1)).fadeOut('fast', function () {
                $.ajax({
                    url: "/system/mTelRcd/relevanceRec",
                    data: {pageSize: size, pageNum: curPage, keyWord: object.keyWord},
                    type: "POST",
                    dataType: "json",
                    success: function (data) {
                        // data = jQuery.parseJSON(data);  //dataType指明了返回数据为json类型，故不需要再反序列化
                        var contentObj = document.getElementsByClassName("content")[0];
                        var isHtml = contentObj.innerHTML;
                        var arr = data.rows;

                        var hasNext = totalPage != curPage;

                        for (var i = 0; i < data.rows.length; i++) {
                            let wkFmNo = arr[i].wkFmNo == null ? '暂无' : arr[i].wkFmNo;
                            // console.log(arr[i])
                            isHtml += '<div class="col-sm-12 work-box" ondblclick="parent.telDetail(' + arr[i].wkPkId + ',' + arr[i].pkId + ')">';
                            isHtml += '<div class="work-box-top">';
                            isHtml += '<div class="col-sm-12 work-box-top-box">';
                            isHtml += '<div class="col-sm-10"><a class="work-box-a" onclick="parent.telDetail(' + arr[i].wkPkId + ',' + arr[i].pkId + ')"><span>' + arr[i].fromName + '[' + arr[i].dfmClaName + ']' + arr[i].dcntAname + '</span></a></div>';
                            isHtml += '<div class="col-sm-2">';
                            isHtml += '<button type="button" class="btn btn-sm btn-primary" onclick="copy(' + '\'' + arr[i].pkId + '\'' + ')" style="color: #206ef7;background-color: white;margin-right: 15px;">一键复制';
                            isHtml += '</button>';
                            // isHtml += '<i class="fa fa-chevron-circle-right"></i>';
                            isHtml += '</div>';
                            isHtml += '</div>';
                            isHtml += '<div class="col-sm-12 work-box-top-class" onclick="parent.telDetail(' + arr[i].wkPkId + ',' + arr[i].pkId + ')">'
                            isHtml += '<div class="col-sm-6"><a style="color: inherit">流水号：' + arr[i].wsCode + '</a></div>'
                            isHtml += '<div class="col-sm-6"><a style="color: inherit">工单编号：' + wkFmNo + '</a></div>'
                            isHtml += '</div>'
                            isHtml += '<div class="col-sm-12 work-box-class" onclick="parent.telDetail(' + arr[i].wkPkId + ',' + arr[i].pkId + ')">';
                            isHtml += '<a style="color: inherit">' + arr[i].fmContent + '</a>'
                            isHtml += '</div>'
                            isHtml += '<div class="col-sm-12 work-box-buttom">';
                            isHtml += '<div class="col-sm-6">' + arr[i].fromTime + '</div>';
                            isHtml += '<div class="col-sm-4">';
                            isHtml += '<div class="col-sm-12 entering-pd">处理情况：' + arr[i].stateDesc + '</div>';
                            isHtml += '</div>';
                            isHtml += '</div>';
                            isHtml += '</div>';
                            isHtml += '</div>';
                        }
                        ;
                        if (hasNext) {
                            isHtml += '<div id="txtMore' + curPage + '" style="text-align: center" onclick="more(' + totalPage + ',' + size + ',' + (curPage + 1) + ')"><a>更多</a></div>'
                        } else {
                            isHtml += '<div style="text-align: center">没有更多了......</div>'
                        }
                        contentObj.innerHTML = isHtml;

                    }

                });
            });
        }
    });

    // 展开/收起
    $('#post-form').hide();
    var childBody = $(parent.document.getElementById("myIframe")).contents().find('body')[0];
    // Math.min(iframe.contentWindow.window.document.documentElement.scrollHeight, iframe.contentWindow.window.document.body.scrollHeight);
    $('#expandBtn').click(function () {
        if ($(this).text().indexOf('展开') > -1) {
            $('#post-form').show();
            $(this).html($(this).html().replace('展开', '收起'));
            $(this).find('i').removeClass('fa-angle-down').addClass('fa-angle-up');
            $('#myIframe', window.parent.document).css('height', childBody.scrollHeight);
        } else {
            $('#post-form').hide();
            $(this).html($(this).html().replace('收起', '展开'));
            $('#myIframe', window.parent.document).css('height', childBody.scrollHeight);
            $(this).find('i').removeClass('fa-angle-up').addClass('fa-angle-down');
        }
    });

</script>
</body>
</html>

